import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { Link, useNavigate } from "react-router-dom";
import Logo from "../assets/logo.svg";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { loginRoute } from "../utils/APIRoutes";

function Login() {

    const navigate = useNavigate();

    const toastOption = {
        position: toast.POSITION.BOTTOM_RIGHT,
        autoClose: 5000,
        pauseOnHover: true,
        theme: "dark"
    }

    const [values, setValues] = useState({
        username: "",
        password: "",
    });

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!handleValidation()) {
            return;
        }
        // 验证成功
        const { username, password } = values;
        const { data } = await axios.post(loginRoute, {
            username,
            password,
        });
        if (data.status === false) {
            toast.error(data.msg, toastOption);
        }
        if (data.status === true) {
            localStorage.setItem("chat-app-user", JSON.stringify(data.user));
            navigate("/");
        }
    }

    const handleValidation = () => {
        const { username, password } = values;
        // 两次密码不同
        if (password === "") {
            toast.error("password is required!", toastOption);
            return false;
        } else if (username === "") {
            toast.error("username is required!", toastOption);
            return false;
        }
        return true;
    }

    const handleChange = (e) => {
        setValues({ ...values, [e.target.name]: e.target.value });
    }

    useEffect(() => {
        if (localStorage.getItem("chat-app-user")) {
            navigate("/");
        }
    }, []);

    return (
        <>
            <FormContainer>
                <form onSubmit={(e) => handleSubmit(e)}>
                    <div className="brand">
                        <img src={Logo} alt="" />
                        <h1>snappy</h1>
                    </div>
                    <input
                        type="text"
                        placeholder="Username"
                        name="username"
                        min="3"
                        onChange={e => handleChange(e)}
                    />
                    <input
                        type="password"
                        placeholder="Password"
                        name="password"
                        onChange={e => handleChange(e)}
                    />
                    <button type="submit">LOGIN</button>
                    <span>Don't have an account ? <Link to="/register">REGISTER</Link></span>
                </form>
            </FormContainer>
            <ToastContainer></ToastContainer>
        </>
    )
}

const FormContainer = styled.div`
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    background-color: #131324;
    .brand {
        display: flex;
        align-items: center;
        gap: 1rem;
        img {
            height: 5rem;
        }
        h1 {
            color: #fff;
            text-transform: uppercase;
        }
    }
    form {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        background-color: #00000076;
        border-radius: 2rem;
        padding: 3rem 5rem;

        input {
            background-color: transparent;
            padding: 1rem;
            border: 0.1rem solid #430eff;
            color: white;
            width: 100%;
            font-size: 1rem;

            &:focus { 
                border: 0.1rem solid #997af0;
                outline: none;
            }
        }

        button {
            background-color: #997af0;
            color: white;
            padding: 1rem 2rem;
            border: none;
            font-weight: bold;
            cursor: pointer;
            border-radius: 0.4rem;
            font-size: 1rem;
            text-transform: uppercase;
            transition: 0.5s ease-in-out;

            &:hover {
                background-color: #4e0eff;
            }
        }
        span {
            color: white;
            text-transform: uppercase;

            a {
                color: #4e0eff;
                text-decoration: none;
                font-weight: bold;
            }
        }
    }
`;

export default Login;
